
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-tw">
<head>
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="男丁格爾's 脫殼玩" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>自製 YouTube 影片播放清單</title>
<style type="text/css">
ul.playlist {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 260px;
	float: left;
}
ul.playlist li {
	margin: 0 3px;
	float: left;
}
ul.playlist li a img {
	border: 0;
	vertical-align: middle;
}

.tv {
	background: #666;
	padding: 10px;
	width: 740px;
	height: 760px;
}
.video {
	float: left;
	width: 480px;
	height: 360px;
}
</style>
<script type="text/javascript">
	$(function(){
		var thumbSize = 'large',		// 設定要取得的縮圖是大圖還是小圖
										// 大圖寬高為 480X360；小圖寬高為 120X90
			imgWidth = '120',			// 限制圖片的寬
			imgHeight = '90',			// 限制圖片的高
			swfWidth = '480',			// 指定 YouTube 影片的寬
			swfHeight = '360',			// 指定 YouTube 影片的高
			autoPlay = '&autoplay=0',	// 是否載入 YouTube 影片後自動播放；若不要自動播放則設成 0
			fullScreen = '&fs=1';		// 是否允許播放 YouTube 影片時能全螢幕播放

		$('.playlist>li>a').each(function(){
			// 取得要連結轉換的網址及訊息內容
			var _this =  $(this),
				_url = _this.attr('href'),
				_info = _this.text(),
				_type = (thumbSize == 'large') ? 0 : 2;
			
			// 取得 vid
			var vid = _url.match('[\\?&]v=([^&#]*)')[1];

			// 取得縮圖
			var thumbUrl = "http://img.youtube.com/vi/"+vid+"/" + _type + ".jpg";
			
			// 把目前超連結的內容轉換成圖片並加入 click 事件
			_this.html('<img src="'+thumbUrl+'" alt="'+_info+'" title="'+_info+'" width="'+imgWidth+'" height="'+imgHeight+'" />').click(function(){
				return false;
			}).focus(function(){
				this.blur();
			}).children('img').click(function(){
				// 當點擊到圖片時就轉換成 YouTube 影片
				var swf  = '<object width="'+swfWidth+'" height="'+swfHeight+'">';
				swf += '<param name="movie" value="http://www.youtube.com/v/'+vid+autoPlay+fullScreen+'"></param>';
				swf += '<param name="wmode" value="transparent"></param>';
				swf += (fullScreen == '&fs=1') ? '<param name="allowfullscreen" value="true"></param>' : '';
				
				swf += '<embed type="application/x-shockwave-flash" src="http://www.youtube.com/v/'+vid+autoPlay+fullScreen+'" ';
				swf += (fullScreen == '&fs=1') ? 'allowfullscreen="true" ' : '';
				swf += 'wmode="transparent" width="'+swfWidth+'" height="'+swfHeight+'"></embed>';

				swf += '</object/>';
				
				$('.video').html(swf);

				return false;
			});
		});

		// 先載入第一個影片
		$('.playlist>li>a').eq(0).children('img').click();

		// 變更影片播放為自動播放
		autoPlay = '&autoplay=1';
	});
</script>
</head>

<body>
	<div class="tv">
		<div class="video"></div>
		<ul class="playlist">
			<li><a href="https://www.youtube.com/watch?v=d2T_Vy29fF0">蘇慧倫-鴨子</a></li>
			<li><a href="https://www.youtube.com/watch?v=Y7VGOnV2QhU">The Pretty Reckless - Just Tonight </a></li>
			<li><a href="https://www.youtube.com/watch?v=hzZ-7xfVMS8">品冠 - 我以為</a></li>
			<li><a href="https://www.youtube.com/watch?v=kCWBIPFVbw0">品冠【未拆的禮物】</a></li>
			<li><a href="https://www.youtube.com/watch?v=1GQfHgF_4hI">周杰倫 - 心雨</a></li>
			<li><a href="https://www.youtube.com/watch?v=Os2N-pC8oi0">周杰倫 - 退後</a></li>
			<li><a href="https://www.youtube.com/watch?v=8NHlWVCpNsU">至少還有你</a></li>
			<li><a href="https://www.youtube.com/watch?v=z4ZsQCcitfE">王傑 - 一場遊戲一場夢 </a></li>
			<li><a href="https://www.youtube.com/watch?v=WTcodZDH-Oc">Angela 張韶涵 - 淋雨一直走</a></li>
			<li><a href="https://www.youtube.com/watch?v=cBp-QhO63Us">Angela 張韶涵 - 有形的翅膀</a></li>
			<li><a href="https://www.youtube.com/watch?v=9JKZ0AEdUMk">那英 - 白天不懂夜的黑</a></li>
			<li><a href="https://www.youtube.com/watch?v=TJvIeOOQPJ0">周蕙~好想好好愛你 </a></li>
			<li><a href="https://www.youtube.com/watch?v=H_9fKEcGeaA">周蕙 不愛了也是一種愛</a></li>
			<li><a href="https://www.youtube.com/watch?v=NPBBnW-zplg">你是我最深愛的人 ( 永邦) </a></li>
			<li><a href="https://www.youtube.com/watch?v=ZRDRFhVryIM">张惠妹&张雨生 - 《最爱的人伤我最深》 </a></li>
			<li><a href="https://www.youtube.com/watch?v=ewCRYJJmBgI">有一种爱叫做放手/阿木 </a></li>
			<li><a href="https://www.youtube.com/watch?v=ne6Qv4ZyA1I">張學友 - 如果愛</a></li>
		</ul>
	</div>
</body>
</html>